<template>
  <el-dialog width="66%" :title="dialogTitle" v-model="dialogVisible" modal @close="closeDialog" draggable
    :close-on-click-modal="false" :append-to-body="true">
    <printPreview ref="printPreview" :tableData="tableData" :tableProps="tableProps" :printFrom="printFrom">
    </printPreview>
    <el-form class="dialog-form" :model="formData" ref="vForm" label-position="right" label-width="120px" size="medium"
      @submit.native.prevent :rules="formRules" :disabled="formDisabled">
      <el-row>
        <el-col :span="12">
          <el-form-item label="入库人" prop="inBy">
            <el-input v-model="formData.inBy" placeholder="请输入入库人" link clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" border style="width: 100%" max-height="30vh">
      <el-table-column v-for="item of tableProps" :key="item.props" :prop="item.prop" :label="item.title"
        :width="item.width">
      </el-table-column>
      <el-table-column label="操作" min-width="60">
        <template slot-scope="{ row }">
          <el-popconfirm title="确定要删除吗？" @confirm="() => handleDel(row)">
            <el-button slot="reference" icon="el-icon-delete" link size="mini" class="danger_button">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
      <el-button type="primary" @click="printInBIll" size="mini">打印入库单</el-button>
      <el-button type="primary" @click="submitForm" size="mini">入 库</el-button>
    </div>
  </el-dialog>
</template>

<script>
import printPreview from '@/components/printPreview.vue'
import { archivesIn } from '@/api/rfid/inBill'
export default {
  name: 'archivesInDialog',
  components: {
    printPreview,
  },
  data() {
    return {
      type: '',
      dialogTitle: '',
      dialogVisible: false,
      formData: {},
      formDisabled: false,
      formRules: {
        inBy: [{ required: true, message: '请输入入库人姓名', trigger: 'blur' }]
      },
      tableData: [],
      tableProps: [
        { title: '档号', prop: 'archiveNo', width: '', checked: true },
        { title: '题名', prop: 'archiveName', width: '', checked: true },
        { title: 'RFID', prop: 'rfid', width: '', checked: true },
        { title: '存放位置', prop: 'positionName', width: '', checked: true },
      ],
      printFrom: [],
    }
  },
  methods: {
    printInBIll() {
      this.printFrom = [
        {
          name: '名称',
          data: '档案入库单',
        },
        {
          name: '入库人',
          data: this.formData.inBy,
        },
      ]
      this.$refs.printPreview.open()
    },
    add(record) {
      this.tableData = record
      this.formDisabled = false
      this.dialogTitle = '添加到入库列表'
      // 先清空表单数据
      this.formData = {
        inBy: localStorage.getItem('userName'),
      }
      this.dialogVisible = true
    },
    handleDel(row) {
      this.tableData = this.tableData.filter((item) => item.labelId !== row.labelId)
    },
    validatePhone(rule, value, callback) {
      const phoneReg = /^1[3-9]\d{9}$/ // 正则表达式匹配中国大陆11位手机号码
      if (!phoneReg.test(value)) {
        callback(new Error('请输入有效的11位手机号码'))
      } else {
        callback()
      }
    },
    submitForm() {
      this.$refs['vForm'].validate((valid) => {
        if (valid) {
          // 判断表格中是否还有数据
          if (this.tableData.length === 0) {
            this.$message.warning('入库列表不能为空')
            return
          }
          this.formData.detailsIds = this.tableData.map((item) => item.detailsId)
          this.formData.labelIds = this.tableData.map((item) => item.labelId)
          archivesIn(this.formData)
            .then((res) => {
              if (res.data.code === 200) {
                this.$message.success('入库成功')
                this.closeDialog()
                this.$emit('clearSelection')
                this.$emit('ok', this.tableData)
                this.$emit('update-data')
                this.$emit('reloadTable')
              } else {
                this.$message.warning(res.data.message)
              }
            })
            .catch((err) => {
              this.$message.error(err)
            })
        }
      })
    },
    closeDialog() {
      this.$refs['vForm'].resetFields()
      this.dialogVisible = false
    },
  },
}
</script>

<style scoped lang="less">
.el-table {
  display: flex;
  flex-direction: column;
}

.el-table__header-wrapper {
  overflow: unset;
}
</style>
